<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body,p,h1,h2,h3{
	padding: 0;
	margin: 0;
}
ul,li{
	padding: 0;
	margin: 0;
	list-style: none;
}
html,body,#main{
	width: 608px;
	height: 352px;
}
#main{
	background: url("./images/background_b.jpg") left top no-repeat;
	position: relative;
}
.right-wrap{
	width: 316px;
	height: calc(100% - 8px);
	background: rgba(255, 255, 255, 0.5);
	position: absolute;
	right: 4px;
	top: 4px;
	border-radius: 5px;
}
.right-wrap .aqi{
	background: rgba(2, 15, 34, 0.9);
	width: calc(100% - 10px);
	height: 40px;
	border-radius: 5px 5px 0 0;	
	margin: 5px 0 0 5px;	
	border-bottom: #fff solid 1px;
}
.right-wrap .aqi p{
	color : #fff;
	font-size: 18px;
	font-family: "微软雅黑";
	text-align: center;
	line-height: 40px;
}
.right-wrap .table{
	width: calc(100% - 10px);
	height: 258px;
	margin: 0 0 0 5px;	
	background: rgba(2, 15, 34, 0.9);
	border-radius: 0 0 5px 5px;	
	border-top: solid 1px #a6c9f6;
}
.table p{
	border-bottom: 1px dashed #4984ca;
	margin: 0 10px;
	height: 32px;
	line-height: 32px;
}
.table p span{
	font-size: 14px;
	color: #fff;
	font-family: "微软雅黑";
	float: left;
}
.table ul{
	float: left;
	margin: 0 10px;
}
.table ul li{
	float: left;
	border-bottom: #8db9ef dashed 1px;
}
.table ul li span{
	float: left;
	font-size: 14px;
	color: #fff;
	font-family: "微软雅黑";
	line-height: 27px;
	height: 27px;
	overflow: hidden;
}
.table ul li.no-border{
	border-bottom: none;
}
.w65{
	width: 78px;
}
.w36{
	width: 32px;
	text-align: center;
}
.w66{
	width: 64px;
	text-align: center;
}
.w78{
	width: 106px;
	text-align: center;
}
.time{
	width: calc(100% - 10px);
	height: 28px;
	margin: 5px 0 0 5px;	
	background: rgba(2, 15, 34, 0.9);
	border-radius: 5px;		
}
.time p{
	font-size: 14px;
	color: #fff;
	padding: 0 10px;
	line-height: 28px;
	height: 28px;
	overflow: hidden;
	font-family: "微软雅黑";
}
#main .table .err{
	border: none;
	color: red;
	font-family: "微软雅黑";
	font-size: 14px;
	padding: 50px 0 0 70px;
	display: none;
}

</style>
</head>
<body>

<div id="main">
	<div class="right-wrap">
		<div class="aqi">
			<p>各站点质量状况</p>
		</div>
		<div class="table">
			<p>
				<span class="w65">监测点</span>
				<span class="w36">AQI</span>
				<span class="w66">等级</span>
				<span class="w78">首要污染物</span>
			</p>
			<ul>
				<li class="err">
					暂无最新预报数据
				</li>
			</ul>
		</div>
		<div class="time">
			<p></p>
		</div>
	</div>
</div>
	

<script src="./js/jquery-3.2.1.js"></script>
<script>
	


getAjax()

setInterval(function(){
	var minutes = new Date().getMinutes()
	if( minutes == 35){
		console.log( new Date() , minutes )
		getAjax()
	}
},60000)



function getAjax(){
	$.ajax({
		type : "get", //jquey是不支持post方式跨域的
		url : "http://19.130.213.59:8080/fsmobile/pub/bigScreen/getPointData", //跨域请求的URL
		dataType : "jsonp",
		jsonp: "jsoncallback",
		success : function(json){ 
			console.log(json)
			if(json.meta.success){
				getJson(json)
			}else{
				$(".err").show()
			}
		},
		error: function(){
			$(".err").show()
		}
	})
}

function getJson(json){
	var html = ""
	var sTime = json.data[0].MONI_TIME
	for(var i = 0 ; i < json.data.length ; i++){
		if( i == 7 ){
			html += '<li class="no-border"><span class="w65">'+ json.data[i].SITE_NAME +'</span><span class="w36">'+ json.data[i].AQI +'</span><span class="w66">'+ json.data[i].QUALITY +'</span><span class="w78">'+ regReplace(json.data[i].PRIMARY_POLLUTANT) +'</span></li>'
		}else{
			html += '<li><span class="w65">'+ json.data[i].SITE_NAME +'</span><span class="w36">'+ json.data[i].AQI +'</span><span class="w66">'+ json.data[i].QUALITY +'</span><span class="w78">'+ regReplace(json.data[i].PRIMARY_POLLUTANT) +'</span></li>'
		}
	}
	$(".table ul").html(html)
	$(".time p").html("更新时间：" + sTime.slice(0,4) + "年" + sTime.slice(5,7) + "月" + sTime.slice(8,10) + "日 " + sTime.slice(11,16))
}


function regReplace(str){
	var reg1 = /SO2/g
	var reg2 = /PM2.5/g
	var reg3 = /PM10/g
	var reg4 = /O3/g
	var reg5 = /NO2/g

	str = str.replace(reg1, "SO<sub>2</sub>")
	str = str.replace(reg2, "PM<sub>2.5</sub>")
	str = str.replace(reg3, "PM<sub>10</sub>")
	str = str.replace(reg4, "O<sub>3</sub>")
	str = str.replace(reg5, "NO<sub>2</sub>")
	return str
}


</script>
</body>
</html>